 {include file="public/head" /}
 <meta charset="utf-8">
 <style>
 .all-list > span{margin-right:20px;}
 </style>
<body>
	<nav class="breadcrumb">
		<span class="breadcrumb-item">用户财务</span> <span
			class="breadcrumb-item">交易订单</span>
	</nav>
	<div id="box" v-cloak>
		<div class="info-title">条件筛选</div>
		<form class="form-inline input-group-sm">
			<label>用户账号</label><input type="text" placeholder="请输入用户账号" name="mobile" v-model="mobile" class="form-control search-input">
			<label>交易类型</label>
			<select class="form-control search-input" v-model="trade_style" name="trade_style">
				<option v-for="item in style_list" :value="item.value">{{item.label}}</option>
			</select>
			<label>交易时间</label><input name="start_time" type="datetime-local" v-model="start_time" placeholder="请输入用户手机号" class="form-control search-input">
			至<input name="end_time" type="datetime-local" v-model="end_time" placeholder="请输入用户手机号" class="form-control search-input">
			<button class="btn btn-primary btn-sm">查询</button>
		</form>
		<div class="info-title">流水汇总</div>
		<div>
			<div class="form-group">
				<label>历史汇总</label>
				<div class="all-list">
					<span>手续费：{{finance.all.fee}}</span>
					<span>盈利：{{finance.all.loss_down}}</span>
					<span>亏损：{{finance.all.loss_up}}</span>
					<span>盈亏：{{finance.all.loss_up - finance.all.loss_down}}</span>
				</div>
			</div>
			<div class="form-group">
				<label>今日汇总</label>
				<div class="all-list">
					<span>手续费：{{finance.day.fee}}</span>
					<span>盈利：{{finance.day.loss_down}}</span>
					<span>亏损：{{finance.day.loss_up}}</span>
					<span>盈亏：{{finance.day.loss_up - finance.day.loss_down}}</span>
				</div>
			</div>
		</div>
		<div class="info-title">交易列表</div>
		<table class="table table-sm table-bordered">
			<tr>
				<th width="50px">#</th>
				<th>用户账户</th>
				<th>交易对</th>
				<th>交易方式</th>
				<th>本金</th>
				<th>手续费</th>
				<th>杠杆倍数</th>
				<th>止盈</th>
				<th>止损</th>
				<th>盈亏</th>
				<th>买入价格</th>
				<th>平仓价格</th>
				<th>创建时间</th>
				<th>平仓时间</th>
				<th>状态</th>
			</tr>
			<tr v-for="(item,key) in list.data">
				<td widtd="50px">{{key + 1}}</td>
				<td>{{item.user_info.user_name}}</td>
				<td>{{item.symbol}}</td>
				<td>
					<span class="badge badge-success" v-if="item.trade_style == 1">买入</span>
					<span class="badge badge-danger" v-else>卖出</span>
				</td>
				<td>{{item.capital}}</td>
				<td>{{item.fee}}</td>
				<td>{{item.multi}}倍</td>
				<td>{{item.loss_up}}%</td>
				<td>{{item.loss_down}}%</td>
				<td>
					<div v-if="item.state == 1">
						<span class="badge badge-warning">持仓中</span>
					</div>
					<div v-if="item.state == 2">
						<span class="badge badge-secondary">无效单</span>
					</div>
					<div v-if="item.state == 0">
						<div v-if="item.trade_style == 1">
							<span class="badge badge-success" v-if="item.close > item.buy_price">+{{item.real_price}}</span>
							<span class="badge badge-danger" v-else>-{{item.real_price}}</span>
						</div>
						<div v-else>
							<span class="badge badge-success" v-if="item.close < item.buy_price">+{{item.real_price}}</span>
							<span class="badge badge-danger" v-else>-{{item.real_price}}</span>
						</div>
					</div>
				</td>
				<td>{{item.buy_price}}</td>
				<td>{{item.close}}</td>
				<td>{{item.create_time}}</td>
				<td>
					<span v-if="item.state == 0">{{item.update_time}}</span>
					<span v-else>--</span>
				</td>
				<td>
					<span class="badge badge-primary" v-if="item.state == 1">持仓中</span>
					<span class="badge badge-warning" v-if="item.state == 0">平仓</span>
					<span class="badge badge-secondary" v-if="item.state == 2">无效单</span>
				</td>
			</tr>
		</table>
		<div class="page-box">
			<div>{$page}</div>
		</div>
	</div>
</body>
<script>
new Vue({
	el:"#box",
	data:{
		style_list : [{label : '全部',value:0},{label : '买入',value:1},{label : '卖出',value:2}],
		trade_style : '{$trade_style}',
		mobile : '{$mobile}',
		start_time : '{$start_time}',
		end_time : '{$end_time}',
		list : {$list | json_encode},
		finance : {$finance | json_encode}
	},
	mounted:function(){
		this.trade_style = this.trade_style ? parseInt(this.trade_style) : 0;
		console.log(this.finance);
	},
	methods:{}
});
</script>
</html>